<template>
  <div class="content">
    <van-nav-bar title="话费充值" />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in 4" :key="item">{{ index + 1 }}</van-swipe-item>
    </van-swipe>

    <van-form class="form">
      <span class="phone-remark">北京移动</span>
      <van-cell-group inset style="border-radius: 0;">
        <van-field 
          left-icon="phone-o" 
          right-icon="contact-o"
          clearable
          maxlength="11"
          v-model="tel" type="tel" class="phone"
          placeholder="输入手机号(自动匹配运营商)" 
          @update:model-value="onPhoneChange"
          @click-right-icon="onShowHistory"
          />
      </van-cell-group>
    </van-form>


    <van-cell-group class="opt-box">
      <van-cell value="最便捷 快速到帐">
        <template #title>
          <span style="font-size: 16px;padding-right: 4px;color: var(--color-text);">话费快充</span>
          <!-- <van-icon name="info-o" color="#999"/> -->
        </template>
      </van-cell>
      <van-grid :gutter="8" :column-num="3">
        <van-grid-item key="1" class="disabled" @click="() => onItemClick(50)">
          <div class="price">50元</div>
          <div class="price-mark">优惠价 49.8元</div>
        </van-grid-item>
        <van-grid-item key="2" @click="() => onItemClick(100)">
          <div class="price">100元</div>
          <div class="price-mark">优惠价 98元</div>
        </van-grid-item>
        <van-grid-item key="3" @click="() => onItemClick(200)">
          <span class="tag">推荐</span>
          <div class="price">200元</div>
          <div class="price-mark">优惠价 196.8元</div>
        </van-grid-item>
      </van-grid>
    </van-cell-group>

    <van-cell-group class="opt-box">
      
      <van-cell>
        <template #title>
          <span style="font-size: 16px;color: var(--color-text);font-weight: 600;">温馨提示</span>
          <van-highlight :keywords="['退单', '超时', '售后']" source-string="退单、超时、售后等问题联系客服处理" />
        </template>
      </van-cell>
      <van-cell title="充值说明">
        <template #label>
          1、话费快充预计4小时到帐，若遇运营商系统维护、充值高峰期等，可能会延迟；<br/>
          2、请您认真核对充值信息，充值成功后不支持退款；若充错号码，建议您尽快联系机主协商；<br/>
          3、若订单显示 充值成功长时间未收到到帐短信提醒，建议您拨打运营商电话或登录网上营业厅查询。若充值失败，系统将自动退还款项；<br/>
          4、副卡、合帐号码、集团号、空号禁止充值；充值的号码可以欠费，余额不能为0元，否则系统查询不到余额，无法充值进账；<br/>
          5、未实名、空号、副卡、集团号、合帐号等状态不支持充值，否则充值不到帐无法售后退款；携号转网可以在专用通道充值；<br/>
          6、禁止多平台充值，在本平台充值的同时，禁止在其他任何平台充值，否则造成撞单返销无法售后；<br/>
          7、月初、月末为充值高峰期，提前充值，以名充值高峰期延误到帐，给您带来不便；<br/>
          8、充值过程中如需急用，可随时联系客服申请撤单；<br/>
          9、如订单显示充值成功，24小时仍未到帐，请及时联系客服录屏售后，售后时效为该订单显示充值成功后5天内，超时效不补不退不售后；<br/>
          10、关于订单问题，请在工作时间内，联系微信客服，平台工作时间：周一到周六 10:00 ~ 24:00;
        </template>
      </van-cell>
    </van-cell-group>
  </div>
  <van-back-top />
</template>
<!-- 下面的写法是setup语法糖 -->
<script setup name="homes">

import { onMounted, ref, reactive } from 'vue'
import { showToast, ActionBar, ActionBarIcon, ActionBarButton } from 'vant';
import { useRouter } from 'vue-router'
const router = useRouter()

const tel = ref('')

const onShowHistory = () => {
  console.log(tel.value)
}

const onPhoneChange = (value) => {
  console.log(111, value, tel.value)
  if(value.length != 11) return
  showToast('充值成功')
}

const onItemClick = (e) => {
  console.log(111, e)
}


// 导入 Axios 实例
import apiClient from '../utils/api';

// const image = ref('');
const list = reactive([]);

// const onSubmit = (data) => {
//   image.value = data.image;
// };
// const chosenContactId = ref('1');
// function onClear() {
//   showToast('clear');
// };
// const onAdd = () => { router.push({ path: '/AboutView' }) };
// const onEdit = (contact) => showToast('编辑' + contact.id);
// const onSelect = (contact) => showToast('选择' + contact.id);
async function getATalk() {
  await apiClient.get('/user/list')
    .then(function (res) {
      console.log('获取的列表', res.data);
      list.value = res.data.list
    })
    .catch(function (error) {
      console.log(error);
    });
};

onMounted(() => {
  for (let i = 0; i < 5; i++) {
    list.push({
      id: i + 1,
      title: `标题 ${i + 1}`
    });
  }
  // 在Vue 3中，直接将一个响应式对象重新赋值为一个新的对象会导致响应式系统失效，并且会触发警告或错误。这种做法破坏了Vue的响应式数据流，因此不被允许。如果你想在组件挂载后更新list数组，你应该使用数组的方法来进行操作，而不是直接重新赋值。例如，你可以使用splice方法来清空数组并添加新的元素：
  // 清空数组
  // list.splice(0, list.length);
  // // 添加新的对象到数组中
  // list.push({
  //   id: 1,
  //   title: '我是标题'
  // });
});



// import TheWelcome from '../components/TheWelcome.vue'
</script>
<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.form{
  position: relative;
  background-color: var(--color-background);
  padding: 40px 0 20px 0;
}
.phone{
  background-color: var(--color-background-soft);
  font-size: 18px;
}
.phone-remark{
  position: absolute;
  color:#888;
  left: 20px;
  top: 14px
}
.opt-box{
  margin-top: 1px;
  padding-bottom: 16px;
  background-color: var(--color-background);
  .van-cell:after{ display: none; }

  .van-grid{ margin: 0 10px;}
  .van-grid-item{
    position: relative; 
    overflow: hidden;
  }
  :deep(.van-grid-item__content:after){
    border-radius: 10px;
    border-color: var(--van-tag-primary-color);
  }
  .disabled{
    :deep(.van-grid-item__content:after){
      border-color: #aaa;
    }
    color: #aaa;
  }

  .price{font-size: 20px;}
  .price-mark{font-size: 13px;}
  .tag{
    position: absolute;
    top: 5px;
    left: -20px;
    width: 70px;
    text-align: center;
    line-height: 16px;
    background-color: rgb(240, 74, 74);
    color: #fff;
    font-size: 12px;
    transform: rotate(-45deg);
  }
}

</style>
